<template>
	<view :style="Theme">
		<uni-nav-bar :statusBar="true" :fixed="true" title="个人中心" />
		<view class="container">
			<view class="headd boxWrap">
				<view class="flex flex-between">
					<view class="zuiobian">
						<image class="avatar" :src="userInfo.avatar || noLoginAvatar" mode="scaleToFill"></image>
						<view class="newinx">
							<view class="name" v-if="userInfo.nickname">{{userInfo.nickname}}</view>
							<view class="namedinahua" v-if="userInfo.nickname">{{userInfo.mobile}}</view>
						</view>
						
						<view v-if="!userInfo.avatar || !userInfo.nickname" @click="ShowLoginTanFun">
							<!-- <view class="deng_btn" @click="goLogin">请登录</view> -->
							<button class="btnBig marT140" @click="getUserInfo">
								请登录
							</button>
						</view>
					</view>
					<view class="youbina">
						<image class="bianji" mode="widthFix" style="width: 30rpx;
						height: auto;" src="/static/images/index_10.png" @click="showEditMsg"></image>
						<!-- <image class="bianji2" src="/static/images/index_11.png"></image> -->
					</view>
				</view>
				<!-- <view class="flex xinzeli">
					<image class="bianji" mode="widthFix" src="/static/images/index_23.png"></image>
					<view>手机号：{{userInfo.mobile || '无'}}</view>
				</view>
				<view class="flex xinzeli">
					<image class="bianji" mode="widthFix" src="/static/images/index_24.png"></image>
					<view>邮箱：{{userInfo.email || '无'}}</view>
				</view>
				<view class="flex xinzeli">
					<image class="bianji" mode="widthFix" src="/static/images/index_25.png"></image>
					<view>工作单位：{{userInfo.companyName || '无'}}</view>
				</view>
				<view class="flex xinzeli">
					<image class="bianji" mode="widthFix" src="/static/images/index_26.png"></image>
					<view>岗位：{{userInfo.job || '无'}}</view>
				</view> -->
			</view>
			<!-- list -->
			<view class="list">
				<navigator url="/sub_my/pages/oderList/index" class="list_li flex flex-between">
					<view class="list_liz flex">
						<image class="list_lizimg" src="/static/images/center01.png"></image>
						<view class="list_lizc">已购课程</view>
					</view>
					<view class="list_liy flex">
						<image class="list_liyimg" src="/static/images/index_27.png"></image>
					</view>
				</navigator>
				<view @click="showEditMsg" class="list_li flex flex-between">
					<view class="list_liz flex">
						<image class="list_lizimg"
							src="/static/images/center02.png"></image>
						<view class="list_lizc">我的信息</view>
					</view>
					<view class="list_liy flex">
						<image class="list_liyimg" src="/static/images/index_27.png"></image>
					</view>
				</view>
				<navigator url="/sub_my/pages/invoice/index" @click="" class="list_li flex flex-between">
					<view class="list_liz flex">
						<image class="list_lizimg" src="/static/images/center03.png"></image>
						<view class="list_lizc">申请开票</view>
					</view>
					<view class="list_liy flex">
						<image class="list_liyimg" src="/static/images/index_27.png"></image>
					</view>
				</navigator>
				<view class="list_li flex flex-between" @click="handlelogout">
					<view class="list_liz flex">
						<image class="list_lizimg" src="/static/images/center04.png"></image>
						<view class="list_lizc">退出</view>
					</view>
					<view class="list_liy flex">
						<image class="list_liyimg" src="/static/images/index_27.png"></image>
					</view>
				</view>
			</view>
			<!-- 未登录的时候--点击获取昵称，头像 -->
				<view class="zhezhao" v-if="isShowLoginTan" @click="isShowLoginTan=false"></view>
				<view class="logint" v-if="isShowLoginTan">
				  <!-- 头像 -->
				  <view class="pictrue">
					<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
					  <image class="avatar" :src="userInfo.avatar?userInfo.avatar:'/static/images/img28.png'"></image>
					</button>
				  </view>
				  <!-- 昵称 -->
				  <input type="nickname" class="nicheng" placeholder="请设置昵称" maxlength="10" v-model="userInfo.nickname"
					@change="onChooseName" />
				  <view class="logint_btn" @click="loginBtn"><image class="weixin_img11" src="/static/images/index_30.png" mode="widthFix">
						</image>登录</view>
				  <view class="logint_di flex">
					<view class="logint_diWrap flex" @click="agreeBtn">
					  <view class="logint_di1" :class="isAgree?'':'huise'">
						<image class="logint_di1_img" v-if="isAgree" src="/static/mine/img29.png" mode="widthFix">
						</image>
					  </view>
					  <view class="logint_diWrapc">您已同意</view>
					</view>
					<view class="logint_di2"><text @click="goIndexDetail('fwxy','用户服务协议')">《用户服务协议》</text>和<text
						@click="goIndexDetail('ysxy','隐私保护声明')">《隐私保护声明》</text></view>
				  </view>
				</view>
			</view>
			<!-- 个人信息收集--弹窗 -->
			<collect-info ref="childRef" @updataMsg="getCurrentUserInfoFun"></collect-info>
		</view>
		
</template>

<script>
	import login from '@/common/sju.login.js'
	import CollectInfo from '@/components/collectInfo/index.vue'
	export default {
		components: {
			CollectInfo
		},
		data() {
			return {
				isShowLoginTan:false,
				enrollList: [{
						title: '人工智能基础',
						price: 1999,
						status: ''
					},
					{
						title: '人工智能基础',
						price: 1999,
						status: ''
					},
					{
						title: '市场营销策略',
						price: 1599,
						status: ''
					},
					{
						title: '数字营销工具',
						price: 1899,
						status: ''
					}
				],
				userInfo: {},
				token:'',
				isAgree: false ,//是否同意
				noLoginAvatar:'/static/images/pic_touxiang.png'
			}
		},
		onShow() {
			let token = uni.getStorageSync('token')
			console.log('有没有token标识')
			console.log(token)
			console.log(uni.getStorageSync('userInfo'))
			this.userInfo = uni.getStorageSync('userInfo')
			this.token = uni.getStorageSync('token')
			this.getCurrentUserInfoFun()
		},
		methods: {
			loginBtn(){
				// 判断设置头像和昵称userInfo.nickname userInfo.avatar
				if(!this.userInfo||this.userInfo.nickname===''){
					uni.showToast({
						title:'请设置昵称',
						icon:'none'
					})
				}else if(!this.userInfo||this.userInfo.avatar===''){
					uni.showToast({
						title:'请设置头像',
						icon:'none'
					})
				}else{
					this.isShowLoginTan=false
				}
				
			},
			// 获取用户信息
			getCurrentUserInfoFun(){
				this.sjuRequest('wx/user/getCurrentUserInfo', 'post', {}).then(res => {
					console.log('获取用户信息---信息')
					console.log(res)
					this.userInfo = res.data
					uni.setStorageSync('userInfo', res.data); //存用户信息
				})
			},
			// 编辑个人信息
			showEditMsg(){
				if(!uni.getStorageSync('token')){
					uni.showToast({
						title:'请先登录',
						icon:'none'
					})
				}else{
					this.$refs.childRef.showTan('center')
					this.$refs.childRef.getCurrentUserInfoFun()
				}
			},
			ShowLoginTanFun(){
				
				this.getUserInfo()
			},
			// 获取头像
			onChooseAvatar(e) {
			  console.log('选择的微信头像')
			  console.log(e)
			  let that = this
			  uni.uploadFile({
			    url: 'https://tts.farmerfriend.cn/wxapi/wx/storage/upload', //上传接口地址
			    name: 'file',
			    filePath: e.detail.avatarUrl, //要上传的文件路径
			    formData: {},
			    header: {
			      "Content-Type": "multipart/form-data"
			    },
			    success: (uploadFileRes) => {
			      console.log('后端返回的图片')
			      let res = JSON.parse(uploadFileRes.data)
			      console.log(res);
			      console.log(that.userInfo)
			      that.userInfo.avatarUrl = res.data.url
				  that.sjuRequest('wx/user/updateUserImage', 'post', {avatar:res.data.url}).then(res => {
					console.log('更新头像')
					console.log(res)
					uni.setStorageSync('userInfo', res.data); //存用户信息
					that.userInfo =  res.data
					that.$forceUpdate()
				  })
			    },
			  })
			},
			// 获取昵称
			onChooseName(e) {
			  let that = this
			  if (this.userInfo.nickname) {
			    this.userInfo.nickname = e.detail.value;
				this.sjuRequest('wx/user/updateUserImage', 'post', {nickname:e.detail.value}).then(res => {
					console.log('更新昵称')
					console.log(res)
					uni.setStorageSync('userInfo', res.data); //存用户信息
					that.userInfo =  res.data
					that.$forceUpdate()
				})
			  }
			},
			agreeBtn() {
			  this.isAgree = !this.isAgree
			},
			editInfo() {
				uni.showToast({
					title: '编辑信息',
					icon: 'none'
				});
			},
			changePwd() {
				uni.showToast({
					title: '修改密码',
					icon: 'none'
				});
			},
			// 跳转登录页
			goLogin() {
				console.log('跳转登录页')
				// uni.navigateTo({
				// 	url: '/sub_intake/pages/login/login'
				// })
				// 授权登录
			},
			// 微信授权登录
			getUserInfo(){
				/*登录提示*/
				let that = this
				uni.getUserProfile({
					desc: '获取用户授权',
					success: res => {
						let userInfo = res.userInfo;
						console.log('获取用户信息')
						console.log(userInfo)
						uni.login({
							provider: 'weixin',
							success: function(loginRes) {
								// 获取临时code
								let code = loginRes.code
								console.log('获取临时凭证code')
								console.log(code)
								that.sjuRequest('wx/auth/loginByWeixin', 'post', {
									code: code
								}, true).then(res => {
									console.log('微信授权---信息')
									console.log(res)
									that.userInfo = res.data.userInfo
									that.token = res.data.token
									if(res.data.userInfo.avatar&&res.data.nickname){
										that.isShowLoginTan= false
									}else{
										that.isShowLoginTan= true
									}
									uni.setStorageSync('token',res.data.token)
									uni.setStorageSync('userInfo',res.data.userInfo)
								})
							}
						})
					}
				})
			},
			// 退出
			handlelogout() {
				uni.showModal({
						title: '提示',
						content: '确定要退出吗?',
						success: function(res) {
							if (res.confirm) {
								console.log('点击确定按钮')
								uni.clearStorageSync()
								uni.reLaunch({
									url:'/pages/tab/index/index'
								})
							}
						},
					})
				}
			},
			
		}
</script>

<style scoped lang="scss">
	.container {
		padding: 20rpx;
		background: #f5f6fa;
		padding-bottom: 0;
	}

	.card {
		background: #fff;
		border-radius: 20rpx;
		box-shadow: 0 4rpx 16rpx #eee;
		margin-bottom: 40rpx;
		padding: 40rpx 0;
		align-items: center;
		display: flex;
		flex-direction: column;
	}

	.avatar {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		border: 1rpx solid #eee;
		margin-right: 20rpx;
	}

	.name {
		font-size: 32rpx;
		font-weight: bold;
		color:#31b0e5;
		margin-bottom: 10rpx;
	}

	.company {
		color: #666;
		margin-bottom: 20rpx;
	}

	.info-row {
		display: flex;
		align-items: center;
		color: #666;
		margin-bottom: 10rpx;
	}
	.btnBig{
		font-size: 32rpx;
	}

	.edit-btn {
		color: #fff;
		margin: 30rpx 0 10rpx 0;
		width: 60%;
		border-radius: 50rpx;
		font-size: 30rpx;
	}

	.pwd-btn {
		background: #ff9800;
		color: #fff;
		width: 60%;
		border-radius: 50rpx;
		font-size: 30rpx;
	}

	.enroll-card {
		padding: 30rpx 20rpx;
	}

	.enroll-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #2d4ed6;
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
		width: 100%;
	}

	.enroll-title .iconfont {
		color: #ff9800;
		margin-right: 10rpx;
	}

	.enroll-item {
		width: 90%;
		margin: 0 auto;
		background: #f7f8fa;
		border-radius: 16rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
	}

	.course-title {
		font-size: 32rpx;
		color: #2d4ed6;
	}

	.course-price {
		color: #222;
		margin: 8rpx 0;
	}

	.course-status {
		color: #888;
		font-size: 26rpx;
	}

	.bianji {
		width: 50rpx;
		height: auto;
		margin-right: 20rpx;
	}

	.bianji2 {
		width: 40rpx;
		height: 40rpx;
		position: relative;
		top: 4rpx;
	}

	.headd {
		margin-bottom: 20rpx;
		padding:30rpx 20rpx;
		box-sizing: border-box;
		justify-content: space-between;
		align-items: center;
	}

	.xinc {
		width: 100%;
		height: auto;
		margin: 0 auto;
		justify-content: center;
	}

	.xincli {
		width: 340rpx;
		height: 255rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 5rpx 19rpx 1rpx #EEF3FE;
		border-radius: 16rpx;
		padding: 10rpx;
		box-sizing: border-box;
	}

	.xinclit {
		width: 100%;
		margin-top: 10rpx;
	}

	.xinclit_img {
		width: 60rpx;
		height: 60rpx;
		margin-right: 10rpx;
		margin-top: 4rpx;
	}

	.xinclit_c {
		width: 240rpx;
	}

	.xinclit_c1 {
		font-weight: bold;
		font-size: 26rpx;
		color: #333333;
		margin-bottom: 4rpx;
	}

	.xinclit_c2 {
		font-size: 22rpx;
		color: #666666;
	}

	.xinclit_bot {
		width: 320rpx;
		height: 145rpx;
		margin-top: 20rpx;
	}

	.list {
		width: 100%;
		height: auto;
		margin-top: 30rpx;
		padding-bottom: 30rpx;
	}

	.list_li {
		width: 700rpx;
		height: 100rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 5rpx 19rpx 1rpx #EEF3FE;
		border-radius: 16rpx;
		align-items: center;
		padding: 0 20rpx;
		box-sizing: border-box;
		margin-bottom: 20rpx;
	}

	.list_liz {
		width: 50%;
		align-items: center;
	}

	.list_lizc {
		font-weight: bold;
		font-size: 26rpx;
		color: #333333;
	}

	.list_lizimg {
		width: 50rpx;
		height: 50rpx;
		margin-right: 18rpx;
	}

	.list_liy {
		width: 50%;
		align-items: center;
		justify-content: flex-end;
	}

	.list_liyv {
		font-size: 22rpx;
		color: #666666;
	}

	.list_liyimg {
		width: 20rpx;
		height: 20rpx;
		margin-left: 40rpx;
	}

	.topczc_v3 {
		font-size: 22rpx;
		color: #333333;
	}

	.topczc_v3 text {
		font-size: 26rpx;
	}

	.zuiobian {
		display: flex;
		align-items: center;
	}

	.deng_btn {
		width: 120rpx;
		height: 60rpx;
		line-height: 60rpx;
		border-radius: 10rpx;
		background: #31b0e5;
		color: #fff;
		text-align: center;
		cursor: pointer;
	}
	.xinzeli{
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}
	.logint {
	    width: 100%;
	    height: 560rpx;
	    position: fixed;
	    bottom: 0;
	    left: 0;
	    z-index: 999;
	    background: #fff;
	    text-align: center;
	    border-radius: 20rpx 20rpx 0px 0px;
		border-bottom: 1px solid #eee;
	    .pictrue {
	      width: 140rpx;
	      height: 140rpx;
	      margin: 0 auto;
	      margin-top: 55rpx;
	      margin-bottom: 50rpx;
	
	      .avatar {
	        width: 140rpx;
	        height: 140rpx;
	        border-radius: 100%;
	      }
	    }
	
	    .nicheng {
	      width: 680rpx;
	      height: 92rpx;
	      border-radius: 100rpx;
	      background-color: rgba(232, 230, 230, 1);
	      color: rgba(16, 16, 16, 1);
	      font-size: 28rpx;
	      margin: 0 auto;
	      margin-bottom: 20rpx;
	    }
	
	    .logint_btn {
	      width: 680rpx;
	      height: 92rpx;
	      line-height: 92rpx;
	      border-radius: 100rpx;
	      background-color:#31b0e5;
	      color: rgba(16, 16, 16, 1);
	      font-size: 28rpx;
	      margin: 0 auto;
	      margin-bottom: 48rpx;
		  color:#fff;
		  display: flex;
		  text-align: center;
		  justify-content: center;
		  align-items: center;
	    }
	  }
	
	  button {
	    padding: 0 !important;
	    margin: 0 !important;
	    border: none !important;
	    background: transparent;
	  }
	
	  button::after {
	    border: none !important;
	  }
	
	  .logint_di {
	    width: 100%;
	    height: auto;
	    justify-content: center;
	
	    .logint_diWrapc {
	      color: rgba(16, 16, 16, 1);
	      font-size: 24rpx;
	    }
	
	    .logint_di1 {
	      width: 24rpx;
	      height: 24rpx;
	      background-color: rgba(249, 191, 65, 1);
	      text-align: center;
	      line-height: 24rpx;
	      border-radius: 100%;
	      margin-right: 12rpx;
	
	      .logint_di1_img {
	        width: 20rpx;
	        height: auto;
	        position: relative;
	        top: -3rpx;
	      }
	    }
	
	    .logint_di1.huise {
	      background-color: #31b0e5
		  ;
	    }
	
	    .logint_di2 {
	      color: rgba(16, 16, 16, 1);
	      font-size: 24rpx;
	
	      text {
	        font-weight: bold;
	      }
	    }
	  }
	
	  .newxin {
	    width: 560rpx;
	    height: auto;
	    border-radius: 20rpx;
	    background-color: rgba(238, 238, 238, 1);
	    padding: 24rpx;
	    box-sizing: border-box;
	
	    .newxin_1 {
	      line-height: 36rpx;
	      color: rgba(16, 16, 16, 1);
	      font-size: 24rpx;
	      font-weight: bold;
	      margin-bottom: 20rpx;
	    }
	
	    .newxin_2 {
	      line-height: 36rpx;
	      color: rgba(16, 16, 16, 1);
	      font-size: 24rpx;
	      margin-bottom: 20rpx;
	
	      text {
	        font-weight: bold;
	      }
	    }
	  }
	
	  .tan.tan_init1 {
	    margin-top: -457rpx;
	  }
	  .weixin_img11{
		  width: 32rpx;
		  height: 32;
		  margin-right: 12rpx;
	  }
</style>